import React from 'react'
import ReactDOM from 'react-dom'

class ReseverTion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    const target = e.target;
    const name = target.name;
    const value = target.name === 'isGoing' ? target.checked : target.value;
    this.setState({
      [name]: value
    })
  }
  render() {
    return (
      <form>
        <label>
          参与：
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleChange}>
          </input>
        </label>
        <label>
          来宾人数：
           <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleChange}>
          </input>
        </label>
      </form>
    )
  }
}

ReactDOM.render(
  <ReseverTion />,
  document.getElementById('root')
)